<template>
    <div class="header" id="header" v-if="isShow">
        <div class="w inner_c">
            <h1 class="logo">
                <router-link to="/">
                    <img src="../../assets/images/header/header_logo.png" alt=""/>
                </router-link>
            </h1>
            <div class="nav">
                <ul>
                    <li class="current">
                        <router-link to="/">首页</router-link>
                    </li>
                    <li>
                        <router-link to="/find">发现</router-link>
                    </li>
                    <li>
                        <router-link to="/public">公开</router-link>
                    </li>
                    <li class="last">
                        <router-link to="/about">关于我们</router-link>
                    </li>
                </ul>
            </div>
            <div class="head_phone" v-if="flag">
                <router-link to="/idea">
                    <!--<img src="../../assets/images/header/header_photo.png" alt=""/>-->
                    <img :src='url' alt="">

                </router-link>
            </div>
            <div class="ksjz" v-if="flag">
                <router-link to="/donation">开始捐赠</router-link>
            </div>
            <div class="exit" v-if="flag">
                <a href="javascript:" @click="exit">退出</a>

            </div>

            <ul class="reg-log" v-if="!flag">
                <li>
                    <router-link to="/login">登录</router-link>
                </li>
                <li class="nav-pile">|</li>
                <li>
                    <router-link to="/register">注册</router-link>
                </li>
                <li>|</li>
                <li>
                    <router-link to="/admin">管理</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                url: '',
                name: '',
                avator: '',
//                isShow:false
            }
        },
        computed: {
            flag(){
                var _this = this
                this.http.post('/users/info').then(function (res) {
                    if (res.data.login == 0) {
                        console.log('用户未登录')
                    } else if (res.data.login == 1) {
//                        console.log(res.data)
                        _this.name = res.data.name
                        _this.avator = res.data.avator
                        _this.$nextTick(function () {
                            _this.url = '/users/show/' + _this.avator
                            _this.$store.state.url = _this.url;
                            if(_this.$store.state.isLogined.toString()==true.toString()){
                                _this.$store.commit('setUser',{
                                    flag:true,
                                    url:_this.url
                                })
//                                console.log('没有触发');
                            }
                        })
                    }
                })
                if(this.$store.state.isLogined.toString()==="true")
                    return true;
                else if (this.$store.state.isLogined.toString()==="false")
                    return false;
            },
            isShow(){
                console.log(this.$store.state.isShow);
                return this.$store.state.isShow;
            }
        },
        watch:{
//          flag(){}
        },
        methods: {
            exit(){
                this.$store.state.isLogined = false
                return this.$store.commit('setUser',{
                    flag:false,
                    url:''
                })
            },


        },
        mounted()
        {
            this.$store.commit('getUser')
        }

    }
</script>
<style scoped>
    @import "../../assets/css/base.css";

    .exit {
        display: inline-block;
        margin-left: 16px;
    }

    .exit a {
        line-height: 64px;
    }

    .reg-log ul {
        overflow: hidden;
    }

    .reg-log li {
        float: left;
        display: block;
        line-height: 58px;
        text-align: center;
        width: 26px;
        color: #818496;
        text-decoration: none;
        font-size: 12px
    }

    .head_phone img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
    }
</style>